<template>
	<div>
		<Nav @fun="fun()"></Nav>
		<div class="bodyh">
			<!-- <el-row>
				<el-col :span="8">
					<TopLeft></TopLeft>
				</el-col>
				<el-col :span="16">
					<TopRight :rightBox="rightBox" @right="right()"></TopRight>
				</el-col>
			</el-row> -->
			<div class="top">
				<div class="left">
					<TopLeft></TopLeft>
				</div>
				<div class="right">
					<TopRight :rightBox="rightBox" @right="right()"></TopRight>
				</div>
			</div>
			<div class="bottom">
				<div class="bottom-box">
					<BottomBoxOne>
						<div class="yuantable" slot="yuantable">
							<div class="bot-mid">
								<div class="bot-mid-one">
										风险概况
								</div>
								<div class="bot-mid-two">本日行业共发生风险事件<span class="white">43件</span>，较昨日增幅<span class="white">16%</span>。其中：级风险事件<span class="white">3</span>件，占比<span class="white">6%</span>，较昨日增幅<span class="white">200%</span>。命中风险点【违法经营】的事件最多共<span class="white">9</span>件，占比<span class="white">21%</span>。</div>
							</div>
							<Pie></Pie>
							<div class="selectDes">
								<img class="check" src="../../assets/img/lookDes.png" />
							</div>
						</div>
						<div class="shengyu" slot="shengyu">
							<div class="bot-mid">
								<div class="bot-mid-one">企业声誉健康度排行</div>
								<div class="bot-mid-two">本日东方证券声誉健康度最佳为<span class="white">100分</span></div>
							</div>
							<div style="display: flex;margin-left: 24px;margin-right: 24px;">
								<div class="shengyu-tit" style="margin-right: 16px;width: 24px;text-align: center;">排名</div>
								<div class="shengyu-tit" style="flex: 1;">企业</div>
								<div class="shengyu-tit" style="width: 60px;">声誉健康度</div>
							</div>
							<div style="display: flex;color: #a8abb4;margin-top: 12px;margin-left: 24px;margin-right: 24px;" v-for="(item,index) in hangyefengxian">
								<div class="shengyu-tit2 shengyu-tit2-one">{{index+1}}</div>
								<div class="shengyu-tit2 shengyu-tit2-two" style="flex: 1;">{{item.name}}</div>
								<div class="shengyu-tit2 shengyu-tit2-three" :style="{color:item.color}">{{item.rank}}<span style="font-size: 14px;">分</span></div>
							</div>
							<div class="selectDes">
								<img class="check" src="../../assets/img/lookDes.png" />
							</div>
						</div>
						<div class="shengyu" slot="shengyu2">
							<div class="shengyu" slot="shengyu">
								<div class="bot-mid">
									<div class="bot-mid-one one-tit">
										<div>涉企高管负面报道</div>
										<div class="ont-tit-btn">
											<div @click="tit = '正面'" :style="{backgroundColor: tit == '正面'?'#0D83B2':''}">正面</div>
											<div @click="tit = '敏感'" :style="{backgroundColor: tit == '敏感'?'#0D83B2':''}">敏感</div>
										</div>
									</div>
									<div class="bot-mid-two">本日中国华融高管王占峰设计负面报道最多，达<span class="white">100篇</span>。</div>
								</div>
								<div style="display: flex;margin-left: 24px;margin-right: 24px;">
									<div class="shengyu-tit" style="margin-right: 16px;width: 24px;text-align: center;">排名</div>
									<div class="shengyu-tit" style="width: 79px;">高管名称</div>
									<div class="shengyu-tit" style="flex: 1;">所属企业</div>
									<div class="shengyu-tit" style="width: 60px;">负面报道数</div>
								</div>
								<div style="display: flex;color: #a8abb4;margin-top: 12px;align-items: flex-end;margin-left: 24px;margin-right: 24px;" v-for="(item,index) in hangyefengxian2">
									<div class="shengyu-tit2 shengyu-tit2-one">{{index+1}}</div>
									<div class="shengyu-tit2 shengyu-tit2-two2">{{item.name}}</div>
									<div class="shengyu-tit2 shengyu-tit2-four2" style="flex: 1;">{{item.bank}}</div>
									<div class="shengyu-tit2 shengyu-tit2-three2" :style="{color:item.color}">{{item.rank}}<span style="font-size: 14px;">分</span></div>
								</div>
								<div class="selectDes">
									<img class="check" src="../../assets/img/lookDes.png" />
								</div>
							</div>
						</div>
						<div class="shengyu" slot="tiao">
							<div class="bot-mid">
								<div class="bot-mid-one">媒体报道偏好</div>
								<div class="bot-mid-two">本日行业敏感舆情的核心报道媒体为<span class="white">财新网</span>，负面报道占比为<span class="white">61%</span>，需重点关注。</div>
							</div>
							<div style="display: flex;margin-left: 24px;margin-right: 24px;">
								<div class="shengyu-tit" style="margin-right: 16px;width: 24px;text-align: center;">排名</div>
								<div class="shengyu-tit" style="flex: 1;">媒体站点</div>
								<div class="shengyu-tit" style="width: 138px;text-align: right;">敏感报道占比</div>
							</div>
							<div style="display: flex;color: #a8abb4;margin-top: 12px;margin-left: 24px;margin-right: 24px;align-items: center;" v-for="(item,index) in tiao">
								<div class="shengyu-tit2 shengyu-tit2-one">{{index+1}}</div>
								<div class="shengyu-tit2 shengyu-tit2-two" style="flex: 1;">{{item.name}}</div>
								<div class="shengyu-tit2 shengyu-tit2-three" style="color: #FFFFFF;width: 138px;text-align: right;display: flex;align-items: center;">
									<div class="tiao">
										<div class="tiao2" :style="{width:item.rank+'%'}">
										</div>
										<div class="xiaosanjiao">
											<div class="xiexian"></div>
										</div>
									</div>
									<div>
										{{item.rank}}%
									</div>
								</div>
							</div>
							<div class="selectDes">
								<img class="check" src="../../assets/img/lookDes.png" />
							</div>
						</div>
					</BottomBoxOne>
				</div>
				<div class="bottom-box">
					<BottomBoxTwo>
						<div class="xiantable" slot="xiantable">
							<div class="bot-mid">
								<div class="bot-mid-one">舆情健康度趋势</div>
								<div class="bot-mid-two">本日行业舆情健康度为<span class="white">89分</span>，高于7日均值，整体舆情健康度持续向好。</div>
							</div>
							<div class="xiantable-top">
								<div style="margin-right: 80px;">
									<div>89<span style="font-size: 14px;">分</span></div>
									<div>
										<img src="../../assets/img/heath.png" />
									</div>
								</div>
								<div>
									<div>70<span  style="font-size: 14px;">分</span></div>
									<div>
										<img src="../../assets/img/seven.png" />
									</div>
								</div>
							</div>
							<Linehr :lineData="lineData" :legend="legend"></Linehr>
						</div>
						<div class="yuantable" slot="yuantable">
							<div class="bot-mid">
								<div class="bot-mid-one">传播影响力分布</div>
								<div class="bot-mid-two">本日行业传播力较高（A&B）的事件数为<span class="white">56件</span>，负面事件<span class="white">30件</span>；其中正面事件<span class="white">26件</span>。</div>
							</div>
							<PieTwo></PieTwo>
							<div class="selectDes">
								<img class="check" src="../../assets/img/lookDes.png" />
							</div>
						</div>
						<div class="xiantable" slot="maptable">
							<div class="bot-mid">
								<div class="bot-mid-one">声誉健康度地图</div>
								<div class="bot-mid-two">本日行业各地声誉健康度预警TOP5为：<span class="white">四川、上海、天津、北京、广东</span>，需重点关注。</div>
							</div>
							<Mape :chinaCities="chinaCities"></Mape>
						</div>
						<div class="xiantable" slot="bartable">
							<div class="bot-mid">
								<div class="bot-mid-one">渠道报道倾向</div>
								<div class="bot-mid-two">本日媒体渠道关于行业报道总量<span class="white">12,023篇</span>，其中负面报道数<span class="white">4673篇</span>，占比<span class="white">32%</span>；正面报道数<span class="white">3645篇</span>，占比<span class="white">24%</span>。</div>
							</div>
							<Bar></Bar>
						</div>
					</BottomBoxTwo>
				</div>
				<div class="bottom-box" style="margin-right: 0;">
					<BottomBoxThree @zhengmian="zhengmian" @mingan="mingan">
						<div class="report" slot="report">
							<div class="report-text" v-for="(item,index) in report" :key="index">
								<div class="report-text-left">
									{{index+1}}
								</div>
								<div class="report-text-right">
									<div>{{item.title}}</div>
									<div style="display: flex;">
										<div class="report2" :style="{color:item2.color,backgroundColor:item2.backgroundColor}" v-for="(item2,index2) in item.power">
											<div style="height: 12px;">
												<img class="jianguan" v-if="item2.name == '监管标签'" src="../../assets/img/jianguan.png" />
											</div>
											<div class="small">{{item2.name}}</div>
										</div>
									</div>
									<div class="report3">
										<div>{{item.rep}}</div>
										<div>{{item.time}}</div>
									</div>
								</div>
							</div>
							<div class="selectDes">
								<img class="check" src="../../assets/img/lookDes.png" />
							</div>
						</div>
					</BottomBoxThree>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import chinaCities from '/src/assets/js/china.js'
	import Bar from '/src/components/bar.vue'
	import Mape from '/src/components/mape.vue'
	import Linehr from '/src/components/linehr.vue'
	import Pie from '/src/components/pie.vue'
	import PieTwo from '/src/components/pie2.vue'
	import Nav from '/src/views/home/components/nav.vue'
	import TopLeft from '/src/views/home/components/topLeft.vue'
	import TopRight from '/src/views/home/components/topRight.vue'
	import BottomBoxOne from '/src/views/home/components/bottomBoxOne.vue'
	import BottomBoxTwo from '/src/views/home/components/bottomBoxTwo.vue'
	import BottomBoxThree from '/src/views/home/components/bottomBoxThree.vue'
	import BottomBoxFour from '/src/views/home/components/bottomBoxFour.vue'
	import resData from '/src/assets/js/data.js'	
	export default {
		components:{
			Bar,
			Mape,
			Linehr,
			Pie,
			PieTwo,
			Nav,
			TopLeft,
			TopRight,
			BottomBoxOne,
			BottomBoxTwo,
			BottomBoxThree,
			BottomBoxFour
		},
		data() {
			return {
				tit:'正面',
				chinaCities:chinaCities.chinaCities,
				tiao:[
					{
						name:'财新网',
						rank:'69'
					},
					{
						name:'中新网',
						rank:'50'
					},
					{
						name:'第一财经',
						rank:'40'
					},
					{
						name:'腾讯网',
						rank:'32'
					},
					{
						name:'雪球网',
						rank:'30'
					}
				],
				rightBox:[
					{
						name:'银行',
						num:97,
						color:'#273560',
						fontColor:'#4ee193'
					},
					{
						name:'保险',
						num:92,
						color:'#273560',
						fontColor:'#4ee193'
					},
					{
						name:'证券',
						num:91,
						color:'#273560',
						fontColor:'#4ee193'
					},
					{
						name:'基金',
						num:87,
						color:'#273560',
						fontColor:'#FFB32E'
					},
					{
						name:'期货',
						num:85,
						color:'#273560',
						fontColor:'#FFB32E'
					},
					{
						name:'信托',
						num:83,
						color:'#273560',
						fontColor:'#FFB32E'
					},
					{
						name:'证券投资咨询',
						num:71,
						color:'#273560',
						fontColor:'#F45D49'
					},
					{
						name:'证券投资咨询',
						num:71,
						color:'#273560',
						fontColor:'#F45D49'
					},
					{
						name:'证券投资咨询',
						num:71,
						color:'#273560',
						fontColor:'#F45D49'
					},
					{
						name:'证券投资咨询',
						num:71,
						color:'#273560',
						fontColor:'#F45D49'
					},
					{
						name:'证券投资咨询',
						num:71,
						color:'#273560',
						fontColor:'#F45D49'
					},
					{
						name:'证券投资咨询',
						num:71,
						color:'#273560',
						fontColor:'#F45D49'
					},
					{
						name:'证券投资咨询',
						num:71,
						color:'#273560',
						fontColor:'#F45D49'
					},
					{
						name:'证券投资咨询',
						num:71,
						color:'#273560',
						fontColor:'#F45D49'
					},
					{
						name:'证券投资咨询',
						num:71,
						color:'#273560',
						fontColor:'#F45D49'
					},
					{
						name:'证券投资咨询',
						num:71,
						color:'#273560',
						fontColor:'#F45D49'
					},
					{
						name:'证券投资咨询',
						num:71,
						color:'#273560',
						fontColor:'#F45D49'
					},
					{
						name:'证券投资咨询',
						num:71,
						color:'#273560',
						fontColor:'#F45D49'
					}
				],
				hangyefengxian:[
					{
						name:'中国农业发展银行',
						rank:96,
						color:'#58dc9f'
					},
					{
						name:'广发银行股份有限公司',
						rank:84,
						color:'#ffb32e'
					},
					{
						name:'国泰证券',
						rank:72,
						color:'#f7534f'
					},
					{
						name:'北京中富金石咨询有限公司',
						rank:71,
						color:'#f7534f'
					},
					{
						name:'华夏银行股份有限公司',
						rank:68,
						color:'#f7534f'
					}
				],
				hangyefengxian2:[
					{
						name:'胡耀阳',
						bank:'交通银行',
						rank:96,
						color:'#FFFFFF'
					},
					{
						name:'吴林',
						bank:'人寿保险',
						rank:84,
						color:'#FFFFFF'
					},
					{
						name:'杨明',
						bank:'建设银行',
						rank:72,
						color:'#FFFFFF'
					},
					{
						name:'雷海',
						bank:'中信银行',
						rank:71,
						color:'#FFFFFF'
					},
					{
						name:'华曦',
						bank:'交通银行',
						rank:68,
						color:'#FFFFFF'
					}
				],
				report:[
					{
						title:'杨振金：9.1黄金高位承压能否突破？原油高位跳水今日是涨是跌操作附解套',
						power:[
							{
								name:'影响力B',
								color:'#58DC9F',
								backgroundColor:'#58DC9F4C',
							}
						],
						rep:'第一财经 | 转载233',
						time:'2020-07-01'
					},{
						title:'最高罚777万！监管出手，多家银行吃罚单：平安、北京银行、广发、农行中招！',
						power:[
							{
								name:'影响力B',
								color:'#58DC9F',
								backgroundColor:'#58DC9F4C',
							}
						],
						rep:'新浪网 | 转载233',
						time:'2020-07-01'
					},{
						title:'杨振金：9.1黄金高位承压能否突破？原油高位跳水今日是涨是跌操作附解套',
						power:[
							{
								name:'影响力B',
								color:'#58DC9F',
								backgroundColor:'#58DC9F4C',
							}
						],
						rep:'第一财经 | 转载233',
						time:'2020-07-01'
					},{
						title:'杨振金：9.1黄金高位承压能否突破？原油高位跳水今日是涨是跌操作附解套',
						power:[
							{
								name:'影响力B',
								color:'#58DC9F',
								backgroundColor:'#58DC9F4C',
							}
						],
						rep:'第一财经 | 转载233',
						time:'2020-07-01'
					},{
						title:'杨振金：9.1黄金高位承压能否突破？原油高位跳水今日是涨是跌操作附解套',
						power:[
							{
								name:'影响力B',
								color:'#58DC9F',
								backgroundColor:'#58DC9F4C',
							}
						],
						rep:'第一财经 | 转载233',
						time:'2020-07-01'
					}
				],
				bottomBoxOneData2:{
					tit:'行业声誉一览',
					title:'传播影响力分布',
					neiron:'本日行业传播力较高（A&B）的事件数为56件，负面事件30件；其中正面事件26件。'
				},
				legend:['yy','mm'],
				lineData:[
					{
						name:'yy',
						data:[40, 60, 50, 65, 85, 75, 80],
						colorStops:['rgba(97,207,251,0.1)','rgba(80,118,210,0.1)'],
						lineStyle:'#61CFFB'
					},
					{
						name:'mm',
						data:[55, 40, 20, 40, 65, 45, 50],
						colorStops:['rgb(92,93,94,0.1)','rgba(80,118,210,0.1)'],
						lineStyle:'#5F5F5F'
					}
				],
				zihangye:{},
			};
		},
		onLoad() {
			
		},
		created() {
			
		},
		mounted() {
			
		},
		methods: {
			fun(){
				console.log("emit,fun");
			},
			right(){
				console.log(123);e
			},
			zhengmian(val){
				console.log(val);
				this.report = [
					{
						title:'杨振金：9.1黄金高位承压能否突破？原油高位跳水今日是涨是跌操作附解套',
						power:[
							{
								name:'影响力B',
								color:'#58DC9F',
								backgroundColor:'#58DC9F4C',
							}
						],
						rep:'第一财经 | 转载233',
						time:'2020-07-01'
					},{
						title:'最高罚777万！监管出手，多家银行吃罚单：平安、北京银行、广发、农行中招！',
						power:[
							{
								name:'影响力B',
								color:'#58DC9F',
								backgroundColor:'#58DC9F4C',
							}
						],
						rep:'新浪网 | 转载233',
						time:'2020-07-01'
					},{
						title:'杨振金：9.1黄金高位承压能否突破？原油高位跳水今日是涨是跌操作附解套',
						power:[
							{
								name:'影响力B',
								color:'#58DC9F',
								backgroundColor:'#58DC9F4C',
							}
						],
						rep:'第一财经 | 转载233',
						time:'2020-07-01'
					},{
						title:'杨振金：9.1黄金高位承压能否突破？原油高位跳水今日是涨是跌操作附解套',
						power:[
							{
								name:'影响力B',
								color:'#58DC9F',
								backgroundColor:'#58DC9F4C',
							}
						],
						rep:'第一财经 | 转载233',
						time:'2020-07-01'
					}
				]
			},
			mingan(e){
				console.log(e);
				this.report = [
					{
						title:'杨振金：9.1黄金高位承压能否突破？原油高位跳水今日是涨是跌操作附解套',
						power:[
							{
								name:'III级风险',
								color:'#F57564',
								backgroundColor:'#F575644C',
							},
							{
								name:'影响力E',
								color:'#F57564',
								backgroundColor:'#F575644C',
							},
							{
								name:'涉嫌犯罪',
								color:'#F57564',
								backgroundColor:'#F575644C',
							},
							{
								name:'监管标签',
								color:'#FFB32E',
								backgroundColor:'#FFB32E4C',
							}
						],
						rep:'第一财经 | 转载233',
						time:'2020-07-01'
					},{
						title:'最高罚777万！监管出手，多家银行吃罚单：平安、北京银行、广发、农行中招！',
						power:[
							{
								name:'III级风险',
								color:'#F57564',
								backgroundColor:'#F575644C',
							},
							{
								name:'影响力E',
								color:'#F57564',
								backgroundColor:'#F575644C',
							},
							{
								name:'涉嫌犯罪',
								color:'#F57564',
								backgroundColor:'#F575644C',
							},
							{
								name:'监管标签',
								color:'#FFB32E',
								backgroundColor:'#FFB32E4C',
							}
						],
						rep:'新浪网 | 转载233',
						time:'2020-07-01'
					},{
						title:'杨振金：9.1黄金高位承压能否突破？原油高位跳水今日是涨是跌操作附解套',
						power:[
							{
								name:'III级风险',
								color:'#F57564',
								backgroundColor:'#F575644C',
							},
							{
								name:'影响力E',
								color:'#F57564',
								backgroundColor:'#F575644C',
							},
							{
								name:'涉嫌犯罪',
								color:'#F57564',
								backgroundColor:'#F575644C',
							},
							{
								name:'监管标签',
								color:'#FFB32E',
								backgroundColor:'#FFB32E4C',
							}
						],
						rep:'第一财经 | 转载233',
						time:'2020-07-01'
					},{
						title:'杨振金：9.1黄金高位承压能否突破？原油高位跳水今日是涨是跌操作附解套',
						power:[
							{
								name:'III级风险',
								color:'#F57564',
								backgroundColor:'#F575644C',
							},
							{
								name:'影响力E',
								color:'#F57564',
								backgroundColor:'#F575644C',
							},
							{
								name:'涉嫌犯罪',
								color:'#F57564',
								backgroundColor:'#F575644C',
							},
							{
								name:'监管标签',
								color:'#FFB32E',
								backgroundColor:'#FFB32E4C',
							}
						],
						rep:'第一财经 | 转载233',
						time:'2020-07-01'
					}
				]
			}
		}
	};
</script>

<style scoped lang="scss">
	.bodyh{
		// width: 1366px;
		// margin: 0 auto;
		margin-left: 40px;
		margin-right: 40px;
	}
	
	.top{
		margin-top: 30px;
		display: flex;
		height: 146px;
		// padding-left: 40px;
		// padding-right: 40px;
		
		.left{
			width: 422px;
			margin-right: 10px;
		}
		
		.right{
			flex: 1;
 			/* display: flex;
			overflow-y: hidden;
			overflow-x: scroll; */
			min-width: 856px;
		}
	}
	
	.bottom{
		// padding-left: 40px;
		margin-top: 10px;
		display: flex;
		// flex-wrap: wrap;
		width: 100%;
	}
	
	.bottom-box{
		flex: 1;
		width: 422px;
		min-width: 422px;
		height: 492px;
		margin-right: 10px;
		position: relative;
		overflow: hidden;
	}
	
	.yuantable{
		// margin-top: 40px;
		text-align: center;
	}
	
	.selectDes{
		position: absolute;
		bottom: 0;
		width: 100%;
		height: 46px;
		background-color: #091344;
	}
	
	.xiantable{
		margin-top: 20px;
		text-align: center;
	}
	
	.xiantable-top{
		display: flex;
		justify-content: center;
		color: #FFFFFF;
		line-height: 32px;
		font-size: 32px;
	}
	
	.check{
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
	}
	
	.report-text{
		display: flex;
		margin: 0 24px;
		color: #FFFFFF;
		margin-top: 21px;
	}
	
	.report-text-left{
		font-size: 20px;
		width: 17px;
		margin-right: 8px;
	}
	
	.report-text-right{
		flex: 1;
		padding-bottom: 11px;
		border-bottom: 1px solid rgba(255,255,255,0.2);
	}
	
	.report1{
		font-size: 14px;
		line-height: 22px;
		opacity: 0.8;
	}
	
	.report2{
		display: flex;
		font-size: 10px;
		border-radius: 3px;
		text-align: center;
		align-items: center;
		margin-top: 4px;
		margin-bottom: 4px;
		margin-right: 5px;
	}
	
	.report3{
		font-size: 10px;
		color: #FFFFFF;
		opacity: 0.5;
		display: flex;
		justify-content: space-between;
	}
	
	.shengyu{
		// margin-top: 69px;
		color: #848795;
	}
	
	.shengyu-tit{
		font-size: 12px;
		line-height: 16px;
	}
	
	.shengyu-tit2{
		font-size: 14px;
	}
	
	
	.shengyu-tit2-one{
		margin-right: 16px;
		width: 24px;
		text-align: center;
	}
	
	.shengyu-tit2-two{
		width: 270px;
	}
	
	.shengyu-tit2-three{
		text-align: right;
		width: 60px;
		font-size: 24px;
		font-family: DINAlternate-Bold;
	}
	
	.shengyu-tit2-two2{
		width: 79px;
	}
	
	.shengyu-tit2-three2{
		width: 60px;
		font-size: 24px;
		font-family: DINAlternate-Bold;
		text-align: right;
	}
	
	.shengyu-tit2-four2{
		width: 193px;
	}
	
	.jianguan{
		margin-left: 4px;
	}
	
	
	.bot-mid{
		margin-top: 34px;
		margin-left: 24px;
		margin-right: 24px;
		text-align: left;
	}
	
	.bot-mid-one{
		font-size: 20px;
		line-height: 20px;
		color: #FFFFFF;
		font-weight: bold;
		margin-bottom: 21px;
	}
	
	.bot-mid-two{
		color: #878b9f;
		font-size: 14px;
		line-height: 22px;
		height: 66px;
	}
	
	/* @media screen and (min-width: 1366px) {
		.bottom-box{
			flex: 1;
			width: 422px;
			min-width: 422px;
			height: 492px;
			margin-right: 10px;
			position: relative;
			overflow: hidden;
		}
	} */
	.tiao{
		display: flex;
		width: 84px;
		height: 8px;
		background-color: #505568;
		border-radius: 25px;
		margin-right: 16px;
	}
	
	.tiao2{
		height: 8px;
		background-color: #FFF7534F;
		border-radius: 25px 0 0 25px;
	}
	
	.xiaosanjiao{
		border-width: 4px;
		border-style: solid;
		border-color: #FFF7534F transparent transparent #FFF7534F;
		border-image: initial;
		position: relative;
	}
	
	.xiexian{
		border-bottom: 2px solid #000000;
		width: 8px;
		transform: rotate(126deg);
		position: absolute;
		width: 10px;
		left: -4px;
		top: -1px;
	}
	
	.report{
		overflow-y: scroll;
		height: 410px;
	}
	
	::-webkit-scrollbar{width:0;}
	
	.one-tit{
		display: flex;
		justify-content: space-between;
	}
	
	.ont-tit-btn{
		display: flex;
		align-items: center;
		width: 86px;
		height: 24px;
		justify-content: space-around;
		background-color: #00245B;
		
		div{
			flex: 1;
			color: #FFFFFF;
			text-align: center;
			border-radius: 2px;
			font-size: 12px;
			height: 24px;
			line-height: 24px;
			opacity: 0.8;
		}
	}
</style>
